<template>
  <uni-popup ref="popupBindDialog" type="center" :mask-click="false">
    <template v-if="haveVIP">
      <view class="gateway-dialog-container vip" v-if="index ===0">
        <view class="bg"></view>
        <view class="body">
          <view class="title">智能AI提醒您</view>
          <template v-if="page==='exam'">
            <text class="label">检测到您多次
              <text class="red">模拟未通过</text>
              ，基础不扎实、
              <text class="red">大概率考试失败</text>
              ！
            </text>
            <text class="label">78%的学员购买了
              <text class="red">“驾校内部密卷”</text>
              通过考试！
            </text>
          </template>
          <text class="label" v-else-if="page==='lianxi'">
            78%的学员通过学习
            <text class="red">“驾校内部密卷”</text>
            通过考试！
          </text>
          <view class="btns">
            <view class="btn2 confirm" @click="confirm('mijuan')">
              <view>练习“内部密卷”</view>
              <view class="sub">做完10套考前密卷，通关率提高99%</view>
            </view>
            <view class="btn2 cancel" @click="toNext">继续做题</view>
          </view>
        </view>
      </view>
    </template>
    <template v-else>
      <view class="gateway-dialog-container" v-if="index ===0">
        <view class="bg"></view>
        <view class="body">
          <view class="title">智能AI提醒您</view>
          <template v-if="page==='exam'">
            <text class="label">检测到您多次
              <text class="red">模拟未通过</text>
              ，基础不扎实、
              <text class="red">大概率考试失败</text>
              ！
            </text>
            <text class="label">78%的学员购买了
              <text class="red">“驾校内部密卷”</text>
              通过考试！
            </text>
          </template>
          <text class="label" v-else-if="page==='lianxi'">
            78%的学员通过学习
            <text class="red">“驾校内部密卷”</text>
            通过考试！
          </text>
          <view class="btns">
            <view class="btn2 confirm" @click="confirm('mijuan')">
              <view>练习“内部密卷”</view>
              <view class="sub">做完10套考前密卷，通关率提高99%</view>
            </view>
            <view class="btn2 cancel" @click="toNext">继续做题</view>
          </view>
        </view>
      </view>
      <view class="gateway-dialog-container" v-else-if="index === 1">
        <view class="bg"></view>
        <view class="body">
          <view class="title">智能AI提醒您</view>
          <text class="label">83%的学员都会因为
            <text class="red">车速题、扣分罚款题</text>
            扣分。
          </text>
          <text class="label">
            <text class="red">3分钟</text>
            学习
            <text class="red">速记口诀</text>
            搞定难题，提高
            <text class="red">75%</text>
            考试通过率！
          </text>
          <view class="btns">
            <view class="btn2 confirm" @click="confirm('suji')">
              <view>学习“驾考秘籍”</view>
            </view>
            <view class="btn2 cancel" @click="toNext">继续做题</view>
          </view>
        </view>
      </view>
    </template>
    <view class="flex-row close-container justify-center">
      <image class="close" @click="toClose"
             src="https://down.qwdata.vip/app_icon/bind_merge_dialog_close.png"></image>
    </view>
  </uni-popup>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'

export default {
  name: "GatewayDialog",
  props: ['page'],
  data() {
    return {
      index: null
    };
  },
  computed: {
    ...mapGetters(['mine', 'haveVIP', 'needShowGateway']),
    ...mapGetters('args', ['getawayDialogIndex'])
  },
  methods: {
    ...mapActions('args', ['changeDialogIndex']),
    tryOpen() {
      if (!this.needShowGateway || this.haveVIP)
        return
      this.changeDialogIndex()
      this.index = this.getawayDialogIndex

      if (this.index > 1) {
        return
      }

      // this.index = 0
      this.$refs.popupBindDialog.open()
      return new Promise((resolve, reject) => {
        this.agreeFn = resolve
        this.noAgreeFn = reject
      })
    },
    toNext() {
      this.$refs.popupBindDialog.close()
      if (this.agreeFn) {
        this.agreeFn()
      }
      this.agreeFn = null
      this.noAgreeFn = null
    },
    toClose() {
      this.$refs.popupBindDialog.close()

      if (this.noAgreeFn) {
        this.noAgreeFn()
      }
      this.agreeFn = null
      this.noAgreeFn = null
    },
    confirm(type) {
      console.log(type)

      if (type === 'suji') {
        uni.navigateTo({
          url: '/pages/shorthand/shorthand?kemu=1'
        })
      }
      if (type === 'mijuan') {
        uni.navigateTo({
          url: '/pages/mijuan/mijuan?kemu=1'
        })
      }

      this.$refs.popupBindDialog.close()

      if (this.noAgreeFn) {
        this.noAgreeFn()
      }
      this.agreeFn = null
      this.noAgreeFn = null
    },
  }
}
</script>

<style lang="scss">
.close-container {
  position: absolute;
  bottom: -150upx;
  left: calc(50% - 29rpx);

  .close {
    width: 58upx;
    height: 60upx;
  }
}

.gateway-dialog-container {
  width: 604upx;
  position: relative;
  padding-bottom: 60rpx;
  background-color: #f1f2f9;
  border-radius: 30rpx;

  .body {
    display: flex;
    flex-direction: column;
    z-index: 2;
    position: inherit;
  }

  .bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: -120rpx;
    border-radius: 30rpx;
    background-image: url("http://down.qwdata.vip/app_icon/1717423926332");
    background-size: 604rpx 720rpx;
    background-position: top;
    background-repeat: no-repeat;
    z-index: 1;
  }

  &.vip {
    .bg {
      background-image: url("http://down.qwdata.vip/app_icon/1717425642170");
    }
  }

  .title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-top: 50rpx;
    margin-bottom: 50rpx;
  }

  .label {
    font-size: 14px;
    margin-left: 45rpx;
    margin-right: 45rpx;
    color: #2A2C2D;
    letter-spacing: 0;
    line-height: 26px;
    margin-bottom: 10rpx;
    text-align: center;

    .red {
      color: #ff7c33;
    }
  }

  .btns {
    display: flex;
    flex-direction: column;
    font-size: 16px;

    .btn2 {
      height: 110upx;
      margin-top: 25rpx;
      border-radius: 100rpx;
      margin-left: 46rpx;
      margin-right: 46rpx;
      display: flex;
      color: #fff;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      flex-direction: column;

      .sub {
        font-size: 12px;
        font-weight: normal;
        margin-top: 5rpx;
      }

      &.confirm {
        background-image: linear-gradient(112deg, #292929 0%, #1A1A22 100%);
        color: #F6CAB2;
      }

      &.cancel {
        background-color: #bfbfbf;
        color: #fff;
      }
    }
  }
}
</style>
